<!-- 普通用户 -->
<template>
  <div class="averageUser">
    <div class="search-wrap">
      <a-row
        type="flex"
        justify="space-between"
      >
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">关键词</span>
          <a-input
            placeholder="账号/用户名称"
            style="width:260px"
            v-model="queryParam.search"
          />
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">审核状态</span>
          <a-select
            :allowClear="true"
            style="width:260px"
            placeholder="请选择审核状态"
            v-model="queryParam.stateFlag"
          >
            <a-select-option
              v-for="item in STATEFLAG"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">用户类型</span>
          <a-select
            :allowClear="true"
            style="width:260px"
            placeholder="请选择用户类型"
            v-model="queryParam.type"
          >
            <a-select-option
              v-for="item in TYPES"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row
        class="m-t-24"
        type="flex"
        justify="space-between"
      >
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">所属区域</span>
          <a-select
            :allowClear="true"
            style="width:260px"
            placeholder="请选择所属区域"
            v-model="queryParam.areaId"
          >
            <a-select-option
              v-for="item in areaList"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col
          :span="7"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-60">注册时间</span>
          <a-range-picker
            format="YYYY-MM-DD"
            style="width:260px"
            @change="pickerChange"
          />
        </a-col>
        <a-col :span="7">
          <a-button
            class="m-r-30"
            type="primary"
            @click="onSearch"
          >
            检索
          </a-button>
          <a-button @click="reset">
            重置
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="table-wrap m-t-30">
      <template>
        <s-table
          ref="sTable"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
        >
          <span
            slot="action"
            slot-scope="text, record"
          >
            <router-link :disabled="record.stateFlag !== 2" :to="`/account/averageUser/audit?id=${record.id}&type=${record.type}`">审核</router-link>
            <a-divider type="vertical" />
            <a-popconfirm
              placement="top"
              ok-text="确定"
              cancel-text="取消"
              @confirm="resetPassword(record.id)"
            >
              <template slot="title">
                <span>您确定重置密码么？</span>
              </template>
              <a>重置密码</a>
            </a-popconfirm>

            <a-divider type="vertical" />
            <a-tooltip
              placement="top"
              trigger="click"
            >
              <template slot="title">
                <span v-if="!!record.reviewOpinion">{{record.reviewOpinion}}</span>
                <span v-else>暂无意见</span>
              </template>
              <a-button type="link" :disabled="!([3,4].includes(record.stateFlag))">查看意见</a-button>
            </a-tooltip>
            <a-divider type="vertical" />
            <a-popconfirm
              placement="top"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteUser(record.id)"
            >
              <template slot="title">
                <span>您确定删除该用户么？</span>
              </template>
              <a>删除</a>
            </a-popconfirm>
          </span>
        </s-table>
      </template>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import {mapState} from 'vuex'
const STATEFLAG = [
  { label: '草稿', value: 1 },
  { label: '审核中', value: 2 },
  { label: '退回修改', value: 3 },
  { label: '审核通过', value: 4 },
]
const TYPES = [
  { label: '个人', value: 1 },
  { label: '代理机构', value: 2 },
  { label: '单位', value: 3 },
]
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
  },
  {
    title: '账号',
    dataIndex: 'account',
    key: 'account',
  },
  {
    title: '用户名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '所属区域',
    key: 'areaName',
    dataIndex: 'areaName',
  },
  {
    title: '用户类型',
    key: 'type',
    dataIndex: 'type',
    customRender: (text, row, index) => {
      // 用户类型 1个人 2代理机构 3单位
      let value = ''
      if (text === 1) value = '个人'
      if (text === 2) value = '代理机构'
      if (text === 3) value = '单位'
      return {
        children: value,
        attrs: {},
      };
    },
  },
  {
    title: '注册时间',
    key: 'createTime',
    dataIndex: 'createTime',
  },
  {
    title: '审核状态',
    key: 'stateFlag',
    dataIndex: 'stateFlag',
    customRender: (text, row, index) => {
      // 状态标识 0删除 1草稿 2审核中 3退回修改 4审核通过
      let value = ''
      if (text === 0) value = '删除'
      if (text === 1) value = '草稿'
      if (text === 2) value = '审核中'
      if (text === 3) value = '退回修改'
      if (text === 4) value = '审核通过'
      return {
        children: value,
        attrs: {},
      };
    },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

export default {
  name: 'averageUser',
  data () {
    return {
      columns,
      // 查询条件参数
      queryParam: {
        areaId: undefined,  //所属区域id
        beginTime: '',  //开始时间
        endTime: '',  //结束时间
        search: '',  //关键字
        stateFlag: undefined, //审核状态
        type: undefined, //用户类型
      },
      STATEFLAG,
      TYPES,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.$axios({
          url: '/user/list',
          method: 'get',
          cancel: {
            _self: this
          },
          params: Object.assign(parameter, this.queryParam)
        }).then(res => {
          return {
            data:res.data.userList,
            totalCount:res.data.total,
            pageNo:res.data.curPage
          }
        })
      },
    };
  },
  computed:{
    ...mapState(['areaList'])
  },
  mounted () {
    console.log('=====', this.$route);
  },
  methods: {
    onSearch () {
      this.$refs.sTable.refresh(true)
    },
    reset () {
      this.queryParam = {
        areaId: undefined,  //所属区域id
        beginTime: '',  //开始时间
        endTime: '',  //结束时间
        search: '',  //关键字
        stateFlag: undefined, //审核状态
        type: undefined, //用户类型
      }
    },
    //日期选择
    pickerChange (time, timeString) {
      console.log('======', time, timeString);
      this.queryParam.beginTime = timeString[0]
      this.queryParam.endTime = timeString[1]
    },
    //重置密码
    resetPassword (id) {
      this.$axios({
        url: '/user/password/reset',
        method: 'put',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        data: {
          userId: id
        }
      }).then(res => {
        this.$message.success('重置密码成功')
      })
    },
    //删除用户
    deleteUser (id) {
      this.$axios({
        url: '/user',
        method: 'delete',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          userId: id
        }
      }).then(res => {
        this.$refs.sTable.refresh()
      })
    }
  }
}

</script>
<style scoped lang='less'>
.averageUser {
  .search-wrap {
  }
}
</style>